  <template>
    <div class="login">
      <div class="search-heard d-flex bg-white jc-between">
        <!-- 左侧返回 -->
        <div> 
          <el-button type="text" @click="$router.push('/loginHome')">
            <div class="iconfont icon-back ml-2 fs-xxl text-dark"></div>
          </el-button>
        </div>

        <div class="title fs-xl mt-3 pl-3">
          登录
        </div>
        <div class="title fs-xl mt-3 pr-3">
          <router-link to="/register"><div class="iconfont icon-sself fs-xxl"></div></router-link>
        </div>
      </div>
      <mt-navbar v-model="selected" class="mx-2">
        <mt-tab-item id="0">
          账号密码登录
        </mt-tab-item>
        <mt-tab-item id="1">
          手机号快捷登录
        </mt-tab-item>
      </mt-navbar>
      <mt-tab-container class="bg-white px-2" v-model="selected">
        <mt-tab-container-item id="0">
          <div class="form-box">
            <div class="form-row">
              <div class="login-p">
              </div>
              <div class="input-box">
                <mt-field type="text" placeholder="请输入您的手机号" :class="checkPhone()" v-model="model.username" maxlength="11" />
              </div>
            </div>
            <div class="form-row">
              <div class="pwd-p">
              </div>
              <div class="input-box pb-3">
                  <mt-field type="password" placeholder="密码" v-model="model.password" maxlength="20" />
              </div>
            </div>
            <div class="btn-row py-3 pt-3" style="text-align: center;">
              <el-button type="danger" @click="login()">登录</el-button>
            </div>
          </div>


        </mt-tab-container-item>
        <mt-tab-container-item id="1">
          <div class="form-box">
            <div class="form-row">
              <div class="login-h">
              </div>
              <div class="input-box">
                  <mt-field type="text" placeholder="请输入您的手机号"  v-model="model.username" maxlength="11" />
              </div>
            </div>
            <div class="form-row pb-3">
              <div class="pwd-p">
              </div>
              <div class="input-box">
                  <mt-field type="text" placeholder="验证码" v-model="verify"  maxlength="6">
                  <el-button size="mini" class="get-ver" @click="getverify()">获取验证码{{backNum==0?'':backNum}}</el-button>
                </mt-field>
              </div>
            </div>
            <div class="btn-row py-3" style="text-align: center;">
                <el-button type="danger" @click="phonelogin()">登录</el-button>
            </div>
            
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
      <div class="px-2 py-1 d-flex jc-center">
        <div class="text-primary" @click="$router.push('/register')">注册账号</div>
      </div>
    </div>
  </template>

  <script>
  
  import { Toast } from "mint-ui";
  import { ShareSheet } from 'vant';
  const checkPhoneReg = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
  export default {
    name: "login",
    data() {
      return {

        model: {
          username: "",
          password: "",
        },
        selected: "0",
        phoneNumber: "",
        verify: "", //输入的验证码
        validateCode: "",// 获取到的验证码
        backNum: 0,
        btnText: "获取验证码",
        validateSuccess: false,
        checkPass: false,
        
      };
    },
    components: {
      "van-share-sheet": ShareSheet
    },
    watch: {
      selected() {
        this.model.username = "";
      }
    },
    methods: {
      onSelect(option) {
        if (option.name === "刷脸登录") {
          this.$router.push('/faceLigon')
          this.showShare = false;
        }else {
          Toast('未支持');
          this.showShare = false;
        }
        
      },

      async login() {

        if (this.model.username == "") {
          Toast("手机号不能为空！");
          return;
        }
        if (!checkPhoneReg.test(this.model.username)) {
          Toast("请输入正确的手机号！");
          return;
        }
        if (this.model.password == "") {
          Toast("密码不能为空！");
          return;
        }
        if (this.model.password.length < 6) {
            Toast("请輸入6位数以上密码");
            return;
          }
        //登录请求
        const res = await this.$http.post('login/signIn.do',this.model)
        console.log(res)
        if (res.status === 404) {
          Toast(res.data.message)
        }
        if (res.data.code != 0) {
          console.log(res.data)
          localStorage.token = res.data.token;
          this.$router.push('/user')
          this.$store.commit('saveUser',res.data);
          this.$store.commit('saveToken',res.data.token);
          Toast('登录成功')
        }else {
          Toast(res.data.message)
        }
      },
      checkPhone() {
        if (
          !checkPhoneReg.test(this.model.username) ||
          this.backNum > 0
        ) {
          this.checkPass = false;
          return "disabled";
        } else {
          this.checkPass = true;
          return "ok";
        }
      },
      async phonelogin() {
        if (this.model.username == "") {
          Toast("请输入手机号");
          return;
        }
        if (!checkPhoneReg.test(this.model.username)) {
          Toast("您输入的手机号格式不对，请重新输入");
          return;
        }
        if (this.verify == "") {
          Toast("请输入验证码");
          return;
        }
        const res = await this.$http.post('login/signIn.do',{username: this.model.username,code: this.verify})
          if (res.data.code != 0) {
               console.log(res.data)
               this.$store.commit('saveUser',res.data);
               this.$store.commit('saveToken',res.data.token);
               this.$router.push('/user')
          } else {
            Toast(res.data.message);
            
          }
      },
      
      async getCode() {
        if (this.backNum == 0) {
          // 发起请求
          const res = await this.$http.get(`login/sendSms.do?phone=${this.model.username}&type=login`);
            console.log(res)
            if (res.status == 200) {
              
              //获取到的验证码
              this.validateCode = res.data.code;
              this.backNum = 60;
              let inter = setInterval(() => {
                this.backNum--;
                if (this.backNum == 0) {
                  this.backNum = 0;
                  clearInterval(inter);//关闭定时器
                }
              }, 1000);

            } else {
              Toast(res.data.message);
            }
          
        }
      },
      getverify() {
        if (this.model.username == "") {
          Toast("请输入手机号");
          return;
        }
        if (!checkPhoneReg.test(this.model.username)) {
          Toast("您输入的手机号格式不对，请重新输入");
          return;
        }
        if (this.backNum == 0) {
          this.getCode();
        }
      },
      

    },
    mounted(){

    },
    created() {
    },
    //人脸识别
    destroyed () {

    }
  };
  </script>

  <style scoped lang='scss'>
  .mint-cell-wrapper {
    background-color: white;
  }
  .el-button {
    width: 98%;

  }

  </style>